<template>
  <!-- sql查询器 -->
  <div class="content-center">
    <div class="content-cotainer border-box">
      <breadcrumb/>
      <div class="audit-content">
        <!-- 页面title -->
        <div class="centent-title">
          <span>{{$route.meta.title}}</span>
        </div>
        <!-- 页面主体 -->
        <div class="centent-inner" style="overflow-x:hidden;">
          <ul class="sql-type">
            <li
              v-for="(item,index) in sqlType"
              :key="index"
              @click="sqlTypeResult(index)"
            >{{item.name}}</li>
          </ul>
          <!-- 右侧树形菜单对应列表查看全部 -->
          <el-dialog title="数据预览" center width="50%" :visible.sync="dialogTableVisible1">
            <div class="dialog-head">
              <span>整行发送到资料书1111</span>
              <span>整行发送到电子表</span>
            </div>
            <div style="border:1px solid #ccc;margin-bottom:40px;">
              <el-table :data="tableData" @selection-change="handleSelectionChange">
                <el-table-column type="selection" width="55"></el-table-column>
                <el-table-column
                  :label="item.label"
                  v-for="(item,index) in listKey"
                  :key="index"
                  show-overflow-tooltip
                >
                  <template slot-scope="scope">
                    <span>{{scope.row.name}}</span>
                  </template>
                </el-table-column>
              </el-table>
            </div>
            <div class="dialog1-btn">
              <span class="btn-primary" @click="closeDialog1">关&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;闭</span>
            </div>
          </el-dialog>

          <el-dialog class="dialog2" title="生成数据分析表" center :visible.sync="dialogTableVisible2">
            <div class="tree">
              <span>选择目录</span>
              <el-tree
                :data="dialog2TreeList"
                :props="defaultProps"
                node-key="id"
                accordion
                @node-click="handleClick3"
              ></el-tree>
            </div>
            <div class="create-watch">
              <span>新表名称：</span>
              <input type="text" name id placeholder="请输入表名...">
            </div>
            <div class="dialog2-btn">
              <span class="btn-primary" @click="createDirectory">新建目录</span>
              <span class="btn-primary" @click="define">确定</span>
              <span class="btn-primary" @click="closeDialog2">取消</span>
            </div>
          </el-dialog>

          <div class="dialog3">
            <el-dialog title="SQL语句管理" center width="50%" :visible.sync="dialogTableVisible3">
              <ul class="dialog3-head">
                <li v-for="(item,index) in dialog3Btn" :key="index" @click="dialog3Select(index)">
                  <i class="el-icon-edit"></i>
                  <span>{{item.title}}</span>
                </li>
              </ul>

              <div class="dialog3Main">
                <div class="dialog3Tree">
                  <el-tree
                    :data="dialog3TreeList"
                    :props="defaultProps"
                    node-key="id"
                    accordion
                    @node-click="handleClick4"
                  >
                    <span class="custom-tree-node" slot-scope="{ node, data }">
                      <span>{{ node.label }}</span>
                      <span>
                        <el-button type="text" size="mini" @click="() => append(data)">Append</el-button>
                        <el-button type="text" size="mini" @click="() => remove(node, data)">Delete</el-button>
                      </span>
                    </span>
                    <el-button type="text" size="mini" @click="() => append(data)">Append</el-button>
                  </el-tree>
                </div>

                <div class="dialog3List">
                  <div>
                    <span>SQL语句名称：</span>
                    <input type="text" v-model="txt1">
                  </div>
                  <div>
                    <span>SQL语句说明：</span>
                    <input type="text" v-model="txt2">
                  </div>
                  <div>
                    <span>SQL语句内容：</span>
                    <div class="lsb-textarea">
                      <el-input type="textarea" :rows="2" placeholder="请输入内容" v-model="txt3"></el-input>
                    </div>
                  </div>
                </div>
              </div>

              <div class="lsb-sure">
                <button class="btn-primary" @click="sure">确认</button>
                <button class="btn-primary" @click="closeDialog">取消</button>
              </div>
            </el-dialog>
          </div>

          <div class="sql-main">
            <div class="sql-left">
              <!-- 左侧树形菜单 -->
              <div class="small-menu">
                <h4 class="centent-title">
                  <span>数据表</span>
                </h4>
                <div class="small-tree-wrap">
                  <el-tree
                    :data="smallTreeList"
                    :props="defaultProps"
                    node-key="id"
                    accordion
                    @node-click="handleClick"
                  >
                    <span slot-scope="{node,data}">
                      <span v-if="data.type == 0" class="el-icon-folder-opened">{{data.label}}</span>
                      <span
                        v-if="data.type == 1"
                        class="el-icon-document"
                        @dblclick="dblTree(data)"
                      >{{data.label}}</span>
                    </span>
                  </el-tree>
                </div>
              </div>
              <!-- 左侧tab切换 -->
              <div class="small-list">
                <el-tabs
                  v-model="activeName1"
                  :tab-position="tabPos"
                  type="card"
                  @tab-click="handleClick1"
                >
                  <el-tab-pane label="字段" name="first">
                    <h4 class="centent-title">
                      <span>字段</span>
                    </h4>
                    <div class="tabs-title">
                      <h4>字段名称</h4>
                      <h4>类型</h4>
                    </div>
                    <ul class="tabs-content">
                      <li v-for="(item,index) in tableData111" :key="index">
                        <div style="display:flex;">
                          <i
                            style="line-height:32px;margin-right:5px;"
                            class="el-icon-folder-opened"
                          ></i>
                          <span @dblclick="dblList(item)">{{item.label}}</span>
                        </div>
                        <span>{{item.type}}</span>
                      </li>
                    </ul>
                  </el-tab-pane>

                  <el-tab-pane label="系统函数" name="second">
                    <h4 class="centent-title">
                      <span>系统函数</span>
                    </h4>
                    <el-tree
                      :data="funList"
                      :props="defaultProps"
                      node-key="id"
                      accordion
                      @node-click="handleClick3"
                    ></el-tree>
                  </el-tab-pane>
                </el-tabs>
              </div>
            </div>
            <!-- 右侧列表 -->
            <div class="sql-right">
              <h4 class="centent-title">
                <span>数据预览</span>
                <span @click="seeDialog">查看全部</span>
              </h4>

              <div class="sql-right-container">
                <div class="inner-table">
                  <el-table :data="tableData" height="240">
                    <el-table-column
                      v-for="(item,index) in listKey"
                      :key="index"
                      :label="item.label"
                      show-overflow-tooltip
                    >
                      <!-- <template slot-scope="scope">
                        <span>{{scope.row.name}}</span>
                      </template>-->
                    </el-table-column>
                  </el-table>
                </div>

                <div class="btn-container">
                  <!-- 执行器 -->
                  <ul class="btn-container-top">
                    <li
                      v-for="(item,index) in actuatorList"
                      :key="index"
                      @click="actuatorItem(index)"
                    >
                      <span class="btn-default">{{item.name}}</span>
                    </li>
                  </ul>
                  <!-- 符号 -->
                  <ul class="btn-container-bottom">
                    <li v-for="(item,index) in signList" :key="index" @click="signItem(item)">
                      <span class="btn-default">{{item.name}}</span>
                    </li>
                  </ul>
                </div>

                <div class="sql-bottom">
                  <div class="sql-bottom-left">
                    <!-- 执行输入框 -->
                    <div class="actuator-txt">
                      <el-input
                        type="textarea"
                        :rows="5"
                        @input="changeTxt1"
                        placeholder="请输入内容"
                        v-model="textarea1"
                      ></el-input>
                    </div>

                    <div class="sql-result">
                      <div class="centent-title">
                        <span>执行结果</span>
                        <span @click="dialogTableVisible1 = true">查看全部</span>
                      </div>

                      <div class="inner-table">
                        <el-table :data="tableData222" height="200">
                          <!-- <el-table-column prop="date" label="日期" width="180"></el-table-column>
                          <el-table-column prop="name" label="姓名" width="180"></el-table-column>
                          <el-table-column prop="address" label="地址"></el-table-column>-->
                          <el-table-column :label="item" v-for="(item,index) in key" :key="index">
                            <template slot-scope="scope">
                              <div>
                                <span style="margin-left: 10px">{{ scope.row }}</span>
                              </div>
                            </template>
                          </el-table-column>
                        </el-table>

                        <el-pagination background layout="prev, pager, next" :total="1000"></el-pagination>
                      </div>
                    </div>
                  </div>
                  <!-- 语句 -->
                  <ul class="sql-bottom-right">
                    <li
                      v-for="(item,index) in sentenceList"
                      :key="index"
                      @click="sentenceItem(item)"
                    >
                      <span class="btn-default">{{item.name}}</span>
                    </li>
                  </ul>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import breadcrumb from "@/components/breadcrumb";
export default {
  data() {
    return {
      key: ["111", "222", "333"],
      dialogTableVisible1: false,
      dialogTableVisible2: false,
      dialogTableVisible3: false,
      dialog2TreeList: [
        {
          id: 0,
          title: "分析数据",
          children: [
            {
              id: 1,
              title: "科目明细账",
              children: [
                {
                  id: 2,
                  title: "新建目录"
                }
              ]
            }
          ]
        }
      ],
      dialog3Btn: [
        {
          title: "刷新",
          id: "0"
        },
        {
          title: "增加目录",
          id: "1"
        },
        {
          title: "修改目录",
          id: "2"
        },
        {
          title: "增加SQL语句",
          id: "3"
        },
        {
          title: "删除",
          id: "4"
        },
        {
          title: "保存",
          id: "5"
        },
        {
          title: "查找",
          id: "6"
        },
        {
          title: "导入",
          id: "7"
        },
        {
          title: "导出",
          id: "8"
        }
      ],
      dialog3TreeList: [
        {
          id: "0",
          title: "SQL语句管理",
          children: [
            {
              id: "1",
              title: "会计数据查询语句",
              children: [
                {
                  id: "4",
                  title: "aaa"
                },
                {
                  id: "5",
                  title: "bbb"
                },
                {
                  id: "6",
                  title:
                    "ccccccccccccccccccccccccccccccccccccccccccccccccccccccccc"
                }
              ]
            },
            {
              id: "2",
              title: "业务数据查询语句"
            },
            {
              id: "3",
              title: "分析数据查询语句"
            }
          ]
        }
      ],
      multipleSelection: [],
      tableData111: [
        // {
        //   label:'aaa',
        //   id:'0',
        //   type:'文本'
        // },
        // {
        //   label:'bbb',
        //   id:'1',
        //   type:'数字'
        // },
        // {
        //   label:'ccc',
        //   id:'2',
        //   type:'文本'
        // },
        // {
        //   label:'ddd',
        //   id:'3',
        //   type:'数字'
        // },
        // {
        //   label:'eee',
        //   id:'4',
        //   type:'文本'
        // }
      ],
      listKey: [],
      tableData222: [
        {
          title: "111",
          date: "2016-05-02",
          name: "王小虎",
          province: "上海",
          city: "普陀区",
          address: "上海市普陀区金沙江路 1518 弄",
          zip: 200333
        },
        {
          title: "222",
          date: "2016-05-04",
          name: "王小虎",
          province: "上海",
          city: "普陀区",
          address: "上海市普陀区金沙江路 1517 弄",
          zip: 200333
        },
        {
          title: "333",
          date: "2016-05-01",
          name: "王小虎",
          province: "上海",
          city: "普陀区",
          address: "上海市普陀区金沙江路 1519 弄",
          zip: 200333
        },
        {
          title: "444",
          date: "2016-05-03",
          name: "王小虎",
          province: "上海",
          city: "普陀区",
          address: "上海市普陀区金沙江路 1516 弄",
          zip: 200333
        }
      ],
      //头部按钮
      sqlType: [
        {
          name: "刷新",
          id: 0
        },
        {
          name: "发送数据",
          id: 1
        },
        {
          name: "显示所有",
          id: 2
        },
        {
          name: "执行SQL",
          id: 3
        },
        {
          name: "分析SQL",
          id: 4
        },
        {
          name: "生成分析数据",
          id: 5
        }
      ],
      //小型树形菜单模拟数据
      smallTreeList: [
        // {
        //   id: 0,
        //   label: "会计数据",
        //   icon: "el-icon-folder-opened",
        //   type:'0',
        //   children: [
        //     {
        //       id: 3,
        //       label: "凭证库",
        //       icon: "el-icon-document",
        //       type:'1',
        //     },
        //     {
        //       id: 4,
        //       label: "未记帐凭证库",
        //       icon: "el-icon-document",
        //       type:'0',
        //     },
        //     {
        //       id: 5,
        //       label: "科目余额",
        //       icon: "el-icon-document",
        //       type:'1'
        //     }
        //   ]
        // },
        // {
        //   id: 1,
        //   label: "业务数据",
        //   type:'0',
        // },
        // {
        //   id: 2,
        //   label: "分析数据",
        //   icon: "el-icon-folder-opened",
        //   type:'0',
        //   children: [
        //     {
        //       id: 9,
        //       label: "aaa",
        //       icon: "el-icon-document",
        //       type:'1',
        //     },
        //     {
        //       id: 10,
        //       label: "bbb",
        //       icon: "el-icon-document",
        //       type:'0'
        //     }
        //   ]
        // }
      ],
      defaultProps: {
        children: "children",
        label: "label"
      },
      funList: [
        {
          id: "0",
          title: "数值型函数",
          children: [
            {
              id: "2",
              title: "ceil()"
            },
            {
              id: "3",
              title: "floor()"
            },
            {
              id: "4",
              title: "mod()"
            },
            {
              id: "5",
              title: "power()"
            },
            {
              id: "6",
              title: "round()"
            },
            {
              id: "7",
              title: "sign()"
            },
            {
              id: "8",
              title: "sqrt()"
            }
          ]
        },
        {
          id: "1",
          title: "常用字符函数",
          children: [
            {
              id: "9",
              title: "initcap()"
            },
            {
              id: "10",
              title: "lower()"
            },
            {
              id: "11",
              title: "replace()"
            },
            {
              id: "12",
              title: "substr()"
            },
            {
              id: "13",
              title: "length()"
            }
          ]
        }
      ],
      activeName1: "first",
      activeName2: "first",
      tabPos: "bottom",
      textarea1: "",
      txt1: "",
      txt2: "",
      txt3: "",
      arr: [],
      arr2: [],
      actuatorList: [
        {
          id: "0",
          name: "管理"
        },
        {
          id: "1",
          name: "选择"
        },
        {
          id: "2",
          name: "保存"
        },
        {
          id: "3",
          name: "清空"
        },
        {
          id: "4",
          name: "撤销"
        },
        {
          id: "5",
          name: "恢复"
        }
      ],
      signList: [
        {
          id: "0",
          name: "*"
        },
        {
          id: "1",
          name: '"'
        },
        {
          id: "2",
          name: "%"
        },
        {
          id: "3",
          name: "_"
        },
        {
          id: "4",
          name: "="
        },
        {
          id: "5",
          name: ">"
        },
        {
          id: "6",
          name: "<"
        },
        {
          id: "7",
          name: "<>"
        },
        {
          id: "8",
          name: "AND"
        },
        {
          id: "9",
          name: "OR"
        },
        {
          id: "10",
          name: "NOT"
        },
        {
          id: "11",
          name: "LIKE"
        },
        {
          id: "12",
          name: "("
        },
        {
          id: "13",
          name: ")"
        }
      ],
      sentenceList: [
        {
          id: 0,
          name: "SELECT",
          txt: "SELECT * from 数据库"
        },
        {
          id: 0,
          name: "SELECT",
          txt: "SELECT * from 数据库"
        },
        {
          id: 0,
          name: "SELECT",
          txt: "SELECT * from 数据库"
        },
        {
          id: 0,
          name: "SELECT",
          txt: "SELECT * from 数据库"
        },
        {
          id: 0,
          name: "SELECT",
          txt: "SELECT * from 数据库"
        },
        {
          id: 0,
          name: "SELECT",
          txt: "SELECT * from 数据库"
        },
        {
          id: 0,
          name: "SELECT",
          txt: "SELECT * from 数据库"
        },
        {
          id: 1,
          name: "WHERE",
          txt: "WHERE * from 数据库"
        },
        {
          id: 2,
          name: "Order By",
          txt: "Order By"
        },
        {
          id: 3,
          name: "Desc",
          txt: "Desc"
        },
        {
          id: 4,
          name: "Ase",
          txt: "Ase"
        },
        {
          id: 5,
          name: "Group By",
          txt: "Group By"
        },
        {
          id: 6,
          name: "Having",
          txt: "Having"
        },
        {
          id: 7,
          name: "Join",
          txt: "Join"
        },
        {
          id: 8,
          name: "AS",
          txt: "AS"
        },
        {
          id: 9,
          name: "Into",
          txt: "Into"
        },
        {
          id: 10,
          name: "Distinct",
          txt: "Distinct"
        },
        {
          id: 11,
          name: "Top",
          txt: "Top"
        }
      ],
      //右侧树形菜单对应列表
      tableData: [
        {
          name: "lsb",
          sex: "男"
        },
        {
          name: "hbr",
          sex: "女"
        },
        {
          name:
            "asdahb啊实打实的发发生发生阿萨发生发生发顺丰案说法阿萨发顺丰sd",
          sex: "男"
        },
        {
          name: "agdag啊实打实的发发生发生阿萨发生发生发顺丰案说法阿萨发顺丰ag",
          sex: "男"
        }
        // {
        // rootNum: 111,
        // date: "2009-05-04",
        // num: "记账1",
        // subjectCode: 230502,
        // subjectName: "对外投资",
        // remark: "收款",
        // debitPrice: "11111",
        // author: "lsb"
        // },
        // {
        //   rootNum: 222,
        //   date: "2009-05-04",
        //   num: "记账1",
        //   subjectCode: 230502,
        //   subjectName: "银行存款",
        //   remark: "收款",
        //   debitPrice: "22222",
        //   author: "lsb"
        // },
        // {
        //   rootNum: 333,
        //   date: "2009-05-04",
        //   num: "记账1",
        //   subjectCode: 230502,
        //   subjectName: "银行存款",
        //   remark: "收款",
        //   debitPrice: "33333",
        //   author: "lsb"
        // },
        // {
        //   rootNum: 444,
        //   date: "2009-05-04",
        //   num: "记账1",
        //   subjectCode: 230502,
        //   subjectName: "银行存款",
        //   remark: "收款",
        //   debitPrice: "44444",
        //   author: "lsb"
        // },
        // {
        //   rootNum: 555,
        //   date: "2009-05-04",
        //   num: "记账1",
        //   subjectCode: 230502,
        //   subjectName: "银行存款",
        //   remark: "收款",
        //   debitPrice: "55555",
        //   author: "lsb"
        // },
        // {
        //   rootNum: 666,
        //   date: "2009-05-04",
        //   num: "记账1",
        //   subjectCode: 230502,
        //   subjectName: "银行存款",
        //   remark: "收款",
        //   debitPrice: "66666",
        //   author: "lsb"
        // }
      ]
    };
  },
  created() {
    //初始化请求左侧树形菜单数据
    this.$axios
      .post(
        "https://www.easy-mock.com/mock/5d4d34a6e5b75c7612162f6d/system/smallTree"
      )
      .then(res => {
        // console.log(res,'111')
        this.smallTreeList = res.data.smallTreeList;
      });
  },
  methods: {
    sqlTypeResult(index) {
      if (index == 0) {
        this.$router.go(0);
      } else if (index == 1) {
        alert("发送数据");
      } else if (index == 2) {
        this.dialogTableVisible1 = true;
      } else if (index == 3) {
        alert("执行SQL");
      } else if (index == 4) {
        alert("分析SQL");
      } else if (index == 5) {
        this.dialogTableVisible2 = true;
      }
    },
    actuatorItem(index) {
      if (index == 0) {
        alert("管理");
      } else if (index == 1) {
        alert("选择");
      } else if (index == 2) {
        this.dialogTableVisible3 = true;
        this.txt3 = this.textarea1;

        console.log(this.textarea1);
      } else if (index == 3) {
        this.textarea1 = "";
        this.arr.length = 0;
        this.arr2.length = 0;
      } else if (index == 4) {
        if (this.arr.length == 0) {
          return;
        } else if (this.arr.length == 1) {
          this.textarea1 = "";
          this.arr2.push(this.arr[0]);
          this.arr.length = 0;
        } else {
          var aaa = this.arr[this.arr.length - 2];
          var bbb = this.arr[this.arr.length - 1];
          this.arr2.push(bbb);
          this.textarea1 = aaa;
          this.arr.pop();
        }
      } else if (index == 5) {
        if (this.arr2.length == 0) {
          return;
        } else if (this.arr2.length == 1) {
          this.textarea1 = this.arr2[0];
          this.arr.push(this.arr2[0]);
          this.arr2.length = 0;
        } else {
          this.textarea1 = this.arr2[this.arr2.length - 1];
          this.arr.push(this.arr2[this.arr2.length - 1]);
          this.arr2.pop();
        }
      }
    },
    signItem(item) {
      this.arr.push(this.textarea1 + item.name);
      this.textarea1 += item.name;
    },
    sentenceItem(item) {
      this.arr.push(this.textarea1 + item.txt);
      this.textarea1 += item.txt;
    },
    changeTxt1(data) {
      this.arr.push(data);
    },
    handleClick1(tab, event) {
      console.log(tab, event);
    },
    handleClick2(tab, event) {
      console.log(tab, event);
    },
    handleClick3(tab, event) {
      if (tab.children == undefined) {
        this.arr.push(this.textarea1 + tab.title);
        this.textarea1 += tab.title;
      }
    },
    handleClick4(tab, event) {
      console.log(tab, event);
    },
    dialog3Select(index) {
      console.log(index);
      if (index == 0) {
        this.$router.go(0);
      }
    },
    sure() {
      // var param = {
      // }
    },
    seeDialog() {
      console.log("查看");
      this.dialogTableVisible1 = true;
    },
    closeDialog() {
      this.dialogTableVisible3 = false;
    },
    // 左侧树形菜单
    handleClick(data) {
      // console.log(data);
      if (data.type == "1") {
        this.$axios
          .post(
            "https://www.easy-mock.com/mock/5d4d34a6e5b75c7612162f6d/system/treeList"
          )
          .then(res => {
            this.tableData111 = res.data.tableData111;
            console.log(this.tableData111, "222");
            this.listKey = this.tableData111;
          });
      }
    },
    dblTree(data) {
      // console.log(data,'333');
      if (data.type == "1") {
        this.textarea1 += data.label;
      }
    },
    //左侧树形菜单对应列表
    dblList(data) {
      console.log(data);
      this.textarea1 += data.label;
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
      console.log(this.multipleSelection);
    },
    closeDialog1() {
      this.dialogTableVisible1 = false;
    },
    createDirectory() {
      alert("创建");
    },
    define() {
      alert("确定");
    },
    closeDialog2() {
      this.dialogTableVisible2 = false;
    }
  },
  components: {
    breadcrumb
  }
};
</script>

<style lang="less" scoped>
.content-cotainer {
  padding: 0 20px 20px 20px;
  height: 100%;
  .centent-inner {
    padding: 0 20px 20px 20px;
  }
}

.dialog2 {
  .tree {
    border: 1px solid #d2d2d2;
    border-radius: 4px;
    height: 280px;
    margin-bottom: 20px;
    & > span {
      display: block;
      height: 40px;
      line-height: 40px;
      text-indent: 20px;
      background: #eceef2;
      font-size: 14px;
      color: #333333;
    }
  }
  .create-watch {
    display: flex;
    height: 32px;
    line-height: 32px;
    font-size: 14px;
    color: #333333;
    margin-bottom: 40px;
    & > span {
      width: 80px;
    }
    & > input {
      width: calc(100% - 80px);
      display: block;
      border: 1px solid #ccc;
      box-sizing: border-box;
      text-indent: 20px;
    }
  }
  .dialog2-btn {
    display: flex;
    justify-content: space-around;
    .btn-primary {
      display: block;
      width: 120px;
      height: 40px;
      line-height: 40px;
      text-align: center;
    }
  }
}

.dialog3 {
  .dialog3-head {
    display: flex;
    justify-content: space-between;
    background: #6c8ab6;
    li {
      display: flex;
      align-items: center;
      padding: 10px;
      i {
        color: #fff;
      }
      span {
        font-size: 12px;
        margin-left: 5px;
        color: #fff;
      }
      // &:hover{
      //   background: #fff;
      // }
      // &:hover span{
      //   color: #6c8ab6;
      // }
      // &:hover i{
      //   color: #6c8ab6;
      // }
    }
  }

  .dialog3Main {
    display: flex;
    margin-bottom: 20px;
    border: 1px solid #ccc;
    .dialog3Tree {
      width: 30%;
      min-height: 400px;
      overflow-y: scroll;
    }
    .dialog3List {
      width: 70%;
      padding-left: 20px;
      & > div {
        margin-bottom: 20px;
        span {
          display: block;
          height: 36px;
          line-height: 36px;
        }
        input {
          width: 80%;
          border-radius: 6px;
          border: 1px solid #ccc;
        }
      }
      & > div:nth-child(1) {
        input {
          height: 30px;
        }
      }
      & > div:nth-child(2) {
        input {
          height: 40px;
        }
      }
      & > div:nth-child(3) {
        margin-bottom: 0;
        input {
          height: 120px;
        }
      }
    }
  }
}

.dialog-head {
  margin-bottom: 20px;
  span {
    font-size: 14px;
    color: #455f85;
    margin-right: 40px;
    text-decoration: underline;
    cursor: pointer;
  }
}
.dialog1-btn {
  display: flex;
  justify-content: center;
  .btn-primary {
    display: block;
    width: 200px;
    height: 40px;
    line-height: 40px;
    text-align: center;
  }
}
.sql-type {
  width: 100%;
  display: flex;
  margin: 20px 0;
  overflow: hidden;
  li {
    height: 32px;
    background: #6c8ab6;
    border-radius: 5px;
    text-align: center;
    line-height: 32px;
    padding: 0 20px;
    margin-right: 20px;
    font-size: 12px;
    color: #ffffff;
    &:hover {
      background: #6c8ab6;
    }
  }
}
.sql-main {
  display: flex;
  width: 100%;
  .sql-left {
    width: 20%;
    margin-top: 0;
    margin-right: 20px;
    .small-menu {
      width: 100%;
      height: 380px;
      margin-bottom: 20px;
      background: #ffffff;
      border: 1px solid #cccccc;
      box-sizing: border-box;
      border-radius: 6px;
    }
    .small-list {
      position: relative;
      width: 100%;
      height: calc(100% - 400px);
      background: #ffffff;
      color: #666666;
      border: 1px solid #cccccc;
      box-sizing: border-box;
      border-radius: 6px;
      position: relative;
      /deep/.el-tabs__header {
        position: absolute;
        bottom: 0;
      }
      .el-tabs {
        // height: 100%;
        // /deep/.el-tabs__content {
        //   height: 360px;
        // }
        // /deep/.el-tabs__header{
        //   margin-left: 20px;
        // }
        // /deep/.el-tabs--card>.el-tabs__header{
        //   border-bottom: 0;
        // }
        // /deep/.el-tabs__item.is-active{
        //   border-bottom: 0;
        // }
        .tabs-title {
          display: flex;
          width: 100%;
          font-size: 16px;
          color: #666666;
          justify-content: space-around;
          margin: 20px 0 10px;
        }
        .tabs-content {
          height: 320px;
          overflow-y: auto;
          li {
            height: 32px;
            line-height: 32px;
            font-size: 14px;
            color: #333;
            display: flex;
            justify-content: space-around;
            &:hover {
              background: #6c8ab6;
              color: #fff;
            }
            span {
              display: block;
            }
          }
        }
      }
    }
  }
  .sql-right {
    .centent-title {
      display: flex;
      justify-content: space-between;
      & span:nth-child(2) {
        margin-right: 20px;
      }
    }
    width: 80%;
    // height: 800px;
    border: 1px solid #ccc;
    box-sizing: border-box;
    border-radius: 6px;
    // .title{
    //   position: relative;
    //   span{
    //     position: absolute;
    //     right: 20px;
    //     bottom: 0;
    //   }
    // }
    .sql-right-container {
      padding: 20px;
      .inner-table {
        margin-bottom: 20px;
        // /deep/.el-table{
        //   height: 240px;
        // }
        // /deep/.el-table__body-wrapper{
        //   height: 200px;
        // }
      }
      .btn-container {
        .btn-container-top {
          display: flex;
          margin-bottom: 10px;
          li {
            margin-right: 20px;
            .btn-default {
              display: block;
              width: 50px;
              text-align: center;
              line-height: 32px;
              border-color: #6c8ab6;
              font-size: 12px;
              color: #6c8ab6;
              &:hover {
                background: #6c8ab6;
                color: #fff;
              }
            }
          }
        }
        .btn-container-bottom {
          display: flex;
          margin-bottom: 20px;
          .btn-default {
            display: block;
            width: 32px;
            text-align: center;
            line-height: 32px;
            border-color: #6c8ab6;
            font-size: 12px;
            color: #6c8ab6;
            margin-right: 10px;
            &:hover {
              background: #6c8ab6;
              color: #fff;
            }
          }
        }
      }
      .sql-bottom {
        height: 420px;
        display: flex;
        .sql-bottom-left {
          width: 80%;
          .actuator-txt {
            margin-bottom: 20px;
            /deep/.el-textarea__inner {
              height: 160px;
            }
          }
          .sql-result {
            .centent-title {
              background: 0;
            }
            .btn-default {
              width: 90px;
              height: 36px;
              line-height: 36px;
              display: block;
              text-align: center;
              background: #ffffff;
              border: 1px solid #d2d2d2;
              box-sizing: border-box;
              border-radius: 5px 5px 0 0;
              border-bottom: 0;
            }
            .inner-table {
              margin: 0;
            }
            /deep/.el-pagination {
              position: absolute;
              right: 0;
              bottom: 0;
            }
            // /deep/.el-table::before{
            //   height: 0;
            // }

            // /deep/.el-table__header-wrapper{
            //   height: 40px;
            // }
            // /deep/.el-table__row{
            //   height: 40px;
            // }

            // /deep/.el-tabs__content {
            //   overflow: auto;
            // }
            // /deep/.el-tabs__header {
            //   margin-bottom: 0;
            // }
            // /deep/.el-tabs__content {
            //   overflow-y: auto;
            //   height: 180px;
            //   border: 1px solid #ccc;
            //   box-sizing: border-box;
            // }
            // /deep/.el-tabs--card > .el-tabs__header {
            //   border-bottom: 0;
            // }
            // /deep/.el-tabs--card > .el-tabs__header .el-tabs__item {
            //   border-bottom: 0;
            // }
          }
          .sql-bottom-left-result {
            display: flex;
            .btn-default:nth-child(1) {
              display: block;
              width: 90px;
              height: 36px;
              text-align: center;
              line-height: 36px;
              font-size: 16px;
              color: #666666;
              border: 0;
              margin-right: 20px;
            }
            .btn-default:nth-child(2) {
              display: block;
              width: 90px;
              height: 36px;
              text-align: center;
              line-height: 36px;
              font-size: 16px;
              color: #666666;
              border: 0;
            }
            .btn-default:hover {
              color: #455f85;
              border: 1px solid #d2d2d2;
              border-bottom: 0;
              border-radius: 5px 5px 0 0;
            }
          }
        }
        .sql-bottom-right {
          width: 160px;
          overflow: auto;
          // height: inherit;
          margin-left: 20px;

          li {
            margin-bottom: 10px;
            margin-right: 20px;
          }
          .btn-default {
            display: block;
            height: 32px;
            font-size: 12px;
            color: #6c8ab6;
            text-align: center;
            line-height: 32px;
            // border-bottom: 0;
            &:hover {
              background: #6c8ab6;
              color: #fff;
            }
          }
          & > li:last-child span {
            border-bottom: 1px solid #6c8ab6;
          }
        }
      }
    }
  }
}
</style>